<template>
  <el-form
    v-loading="loading"
    class="skuForm_form-marginRight"
    label-width="100px"
  >
    <el-form-item label="SKU名称">
      <el-input v-model="skuParams.skuName" placeholder="SKU每次"></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input
        v-model="skuParams.price"
        type="number"
        placeholder="价格(元)"
      ></el-input>
    </el-form-item>
    <el-form-item label="重量(g)">
      <el-input
        v-model="skuParams.weight"
        type="number"
        placeholder="重量(g)"
      ></el-input>
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input
        v-model="skuParams.skuDesc"
        type="textarea"
        placeholder="SKU描述"
      ></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true">
        <el-form-item
          v-for="item in attrArr"
          :label="item.attrName"
          :key="item.id"
        >
          <el-select v-model="item.attrIdAndValueId">
            <el-option
              :value="`${item.id}:${attrValue.id}`"
              v-for="attrValue in item.attrValueList"
              :label="attrValue.valueName"
              :key="attrValue.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true">
        <el-form-item
          v-for="item in saleArr"
          :label="item.saleAttrName"
          :key="item.id"
        >
          <el-select v-model="item.saleIdAndValueId">
            <el-option
              :value="`${item.id}:${saleAttrValue.id}`"
              v-for="saleAttrValue in item.spuSaleAttrValueList"
              :label="saleAttrValue.saleAttrValueName"
              :key="saleAttrValue.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <el-table :data="imgArr" :border="true" ref="table">
        <el-table-column
          type="selection"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column label="图片" width="250" align="center">
          <template #="{ row }">
            <img
              class="skuForm_table-img"
              :src="row.imgUrl"
              :alt="row.imgName"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="imgName"
          label="名称"
          width="250"
        ></el-table-column>
        <el-table-column label="操作">
          <template #="{ row }">
            <el-button @click="handler(row)" type="warning">设置默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button @click="save" type="primary">保存</el-button>
      <el-button @click="cancel" type="danger">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
// 引入分类仓库
import useCategoryStore from "@/store/modules/category";
// 引入请求API
import { reqAttr } from "@/api/product/attr";
import {
  reqSpuImageList,
  reqSpuHasSaleAttr,
  reqAddSku,
} from "@/api/product/spu";
import type { SkuData } from "@/api/product/spu/type";
import { ElMessage } from "element-plus";
let categoryStore = useCategoryStore();
let $emit = defineEmits(["changeSight"]);
// 平台属性
let attrArr = ref<any>([]);
// 销售属性
let saleArr = ref<any>([]);
// 平台属性
let imgArr = ref<any>([]);
// 获取table组件实例
let table = ref();
// 判断数据是否全部请求完毕
let loading = ref<boolean>(false);
// 收集SKU的参数
let skuParams = reactive<SkuData>({
  // 父组件传递过来的数据
  category3Id: "", // 三级分类的ID
  spuId: "", // 已有的SPU的ID
  tmId: "", // SPU品牌的ID
  // v-model收集
  skuName: "", // sku名字
  price: "", // sku价格
  weight: "", // sku重量
  skuDesc: "", // sku的描述

  skuAttrValueList: [
    // 平台属性的收集
  ],
  skuSaleAttrValueList: [
    // 销售属性
  ],
  skuDefaultImg: "", // sku图片地址
});
// 取消按钮的回调
const cancel = () => {
  $emit("changeSight", 0, true, false);
};

// 当前子组件的方法对外暴露
const initSkuData = async (spu: any) => {
  loading.value = await true;
  // 清除数据
  Object.assign(skuParams, {
    // v-model收集
    skuName: "", // sku名字
    price: "", // sku价格
    weight: "", // sku重量
    skuDesc: "", // sku的描述
    skuAttrValueList: [
      // 平台属性
    ],
    skuSaleAttrValueList: [
      // 销售属性
    ],
    skuDefaultImg: "", // sku图片地址
  });
  // 收集数据
  skuParams.category3Id = spu.category3Id;
  skuParams.spuId = spu.id;
  skuParams.tmId = spu.tmId;
  // 获取平台属性
  let reqAttrData: any = await reqAttr(
    categoryStore.c1Id,
    categoryStore.c2Id,
    spu.category3Id,
  );
  // 获取对应的销售属性
  let reqSpuHasSaleAttrData: any = await reqSpuHasSaleAttr(spu.id);
  // 获取照片墙的数据
  let reqSpuImageListData: any = await reqSpuImageList(spu.id);
  attrArr.value = reqAttrData.data;
  saleArr.value = reqSpuHasSaleAttrData.data;
  imgArr.value = reqSpuImageListData.data;
  loading.value = await false;
};
// 设置默认图片的方法
const handler = (row: any) => {
  // 点击的时候全部复选款不勾选
  imgArr.value.forEach((item: any) => {
    table.value.toggleRowSelection(item, false);
  });
  // 复选款选中
  table.value.toggleRowSelection(row, true);
  // 收集图片地址
  skuParams.skuDefaultImg = row.imgUrl;
};
// 保存按钮的方法
const save = async () => {
  // 整理参数
  // 平台属性
  skuParams.skuAttrValueList = attrArr.value.reduce((prev: any, next: any) => {
    if (next.attrIdAndValueId) {
      let [attrId, valueId] = next.attrIdAndValueId.split(":");
      prev.push({
        attrId,
        valueId,
      });
    }
    return prev;
  }, []);
  //  销售属性
  skuParams.skuSaleAttrValueList = saleArr.value.reduce(
    (prev: any, next: any) => {
      if (next.saleIdAndValueId) {
        let [saleAttrId, saleAttrValueId] = next.saleIdAndValueId.split(":");
        prev.push({
          saleAttrId,
          saleAttrValueId,
        });
      }
      return prev;
    },
    [],
  );
  // 添加SKU请求
  let result = await reqAddSku(skuParams);
  if (result.code) {
    ElMessage({
      type: "success",
      message: "添加SKU成功",
    });
    cancel();
  } else {
    ElMessage({
      type: "error",
      message: "添加SKU失败",
    });
  }
};
// 对外暴露事件的方法
defineExpose({ initSkuData });
</script>
<style scoped lang="scss">
.skuForm_table-img {
  width: 100px;
}

.skuForm_form-marginRight {
  margin-right: 300px;
}

@media (max-width: 1280px) {
  .skuForm_form-marginRight {
    margin-right: 100px;
  }
}

@media (max-width: 765px) {
  .skuForm_form-marginRight {
    margin-right: 0;
  }
}
</style>
